import React from 'react';
import Plot from 'react-plotly.js';

const PlotlyCharts = () => {
  return (
    <div style={ 
     {  
        // width: '100%',
        // height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: '20px', // 图表之间的间距
     }
    }>
      {/* Line Chart */}
      <Plot
        data={[
          {
            x: ['一月', '二月', '三月', '四月', '五月', '六月'],
            y: [65, 59, 80, 81, 56, 55],
            type: 'scatter',
            mode: 'lines+markers',
            marker: { color: 'pink' },
          },
        ]}
        layout={{
          title: 'Line Chart Example',
          xaxis: { title: 'Month' },
          yaxis: { title: 'Value' },
        }}
        style={{ width: '45%', height: '50%' }} // 调整每个图表的尺寸
      />

      {/* Pie Chart */}
      <Plot
        data={[
          {
            labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
            values: [65, 59, 80, 81, 56, 55],
            type: 'pie',
            textinfo: 'percent', // 显示百分比
            marker: { colors: ['pink', 'blue', 'green', 'yellow', 'orange', 'purple'] },
          },
        ]}
        layout={{
          title: 'Pie Chart Example',
        }}
        style={{ width: '45%', height: '70%' }} // 调整每个图表的尺寸
      />
    </div>
  );
};

export default PlotlyCharts;
